<template>
  <div>
    <template v-if="disabled">
      <ul v-if="data[fileKey] && data[fileKey].length">
        <li v-for="(item, index) in data[fileKey]" :key="index">
          <span class="blue download" @click="downloadFile(item.fileId)">
            <span v-if="item.fileMijiCode != '20'">【{{ item.fileMijiCode | mijiCodeFilter }}级】</span>{{ item.fileName }}
          </span>
        </li>
      </ul>
      <span v-else>无</span>
    </template>
    <template v-else>
      <m-button size="mini" @click="showUploadFileDialog">{{ btnText }}</m-button>
      <slot name="notice"></slot>
      <ul class="el-upload-list el-upload-list--text">
        <li class="el-upload-list__item is-success" v-for="(item, index) in data[fileKey]" :key="item.fileId">
          <a class="el-upload-list__item-name">
            <i class="el-icon-document"></i>
            {{ item.fileName }}
          </a>
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-circle-check"></i>
          </label>
          <i class="el-icon-close" @click="removeFile(item, index)"></i>
        </li>
      </ul>
    </template>

    <m-dialog :visible.sync="uploadDialogVisible" title="上传文件" confirm-button-text="上传" @confirm="handleUploadSubmit" @close="handleUploadClose">
      <el-upload
        v-if="uploadDialogVisible"
        ref="upload"
        :accept="accept"
        :limit="limit"
        :multiple="limit != 1"
        :action="actionUrl"
        :http-request="uploadFile"
        :file-list="fileList"
        :show-file-list="limit != 1"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
      >
        <m-button class="mb-20">选择文件</m-button>
      </el-upload>
    </m-dialog>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
export default {
  name: 'MUploadFm',
  props: {
    btnText: {
      type: String,
      default: '上传附件',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return {
          fileList: [],
        }
      },
    },
    fileKey: {
      type: String,
      default: 'fileList',
    },
    limit: {
      type: Number,
      default: 99,
    },
    size: {
      type: Number,
      default: 99999,
    },
    accept: {
      type: String,
      default: '',
    },
    secretLevelKey: {
      type: String,
      default: 'dataLevel',
    },
    secretLevelVal: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      uploadDialogVisible: false,
      fileList: [],
    }
  },
  computed: {
    actionUrl() {
      return this.$api.uploadFile
    },
  },
  methods: {
    showUploadFileDialog() {
      this.uploadDialogVisible = true
    },
    removeFile(item, index) {
      this._confirm
        .call(this, {
          content: `确定删除${item.fileName}吗？`,
          confirmText: '删除',
        })
        .then(next => {
          this.data[this.fileKey].splice(index, 1)
          this.$message.success('删除成功')
          next()
        })
    },
    updateUploadFile(fileList) {
      if (fileList) {
        this.data[this.fileKey] = this.limit == 1 ? fileList : this.data[this.fileKey].concat(fileList)
      }
      this.uploadDialogVisible = false
    },
    // 下载附件
    downloadFile(fileId) {
      window.location.href = this.$config.server + `${this.$api.downLoadMbFile}?fileId=${fileId}&flag=0`
    },

    /**
     * 上传附件
     */
    uploadFile(file) {
      this.fileList.push(file.file)
    },
    beforeUpload(file) {
      const sizeLimit = file.size / 1024 / 1024 < this.size
      if (!sizeLimit) {
        this.$message.warning('上传文件大小超出限制，请检查')
        return false
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handleUploadSubmit() {
      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('file', file)
      })
      this.$http.postFile(this.actionUrl, formData).then(res => {
        this.$message.success('上传成功')
        const list = this.limit == 1 ? [] : cloneDeep(this.data.fileList)
        this.fileList.forEach((item, index) => {
          list.push({
            fileName: item.name,
            fileId: res.data[index],
          })
        })
        this.handleUploadClose()
        this.$emit('change', list)
      })
    },
    handleUploadClose() {
      this.uploadDialogVisible = false
      this.$utils.resetDataByKey.call(this, 'fileList')
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload {
    display: inline;
    text-align: center;
    cursor: pointer;
    outline: 0;
  }
  .el-upload-list {
    margin-top: 10px;
    max-height: 50vh;
    overflow-y: scroll;
  }
}
</style>
